<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>专题</title>
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/onlypro.css" />
		<script src="js/animateBak.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				let btn=document.querySelector('.icon-tuichu')
				let shadow=document.querySelector('.shadow')
				let alert = document.querySelector('.alert')
				let cancel= document.querySelector('.cancel')
				console.log(shadow)
				btn.onclick=function(){
					
					shadow.style.display='block'
					alert.style.display='block'
					animate(alert,{bottom:0})
					cancel.onclick=function(){
						shadow.style.display='none'
						
						animate(alert,{bottom:-400})
						alert.style.display='none'
					}
					document.onmousedown=function(){
						shadow.style.display='none'
						
						animate(alert,{bottom:-400})
						alert.style.display='none'
					}
				}
			}
		</script>
		<span style="position:absolute; display: none;" class="shadow" ></span>
		<div class="alert" style="display: none;">
			<div class="alert-top">
				<h2>分享后预计可赚取佣金<span>￥24</span></h2>
				<p>好友通过你分享的页面成功购买后，你可以获得对应的佣金。佣金可在“我的--推广中心”里查看</p>
			</div>
			<div class="alert-bottom">
				<a href="">
					<em class="iconfont icon-shengchenghaibao"></em>
					<span>生成海报</span>
				</a>
				<a href="">
					<em class="iconfont icon-weixin1" style="background: #3bb136;"></em>
					<span>微信好友</span>
				</a>
				<a href="">
					<em class="iconfont icon-iconfontzhizuobiaozhunbduan36"style="background: #e1cd5c;"></em>
					<span>朋友圈</span>
				</a>
				<a href="">
					<em class="iconfont icon-xinlangweibo"style="background: #ff515a;"></em>
					<span>新浪微博</span>
				</a>
				<a href="">
					<em class="iconfont icon-qq"style="background: #4cafea;"></em>
					<span>qq好友</span>
				</a>
			</div>
		
				<button type="button" class="cancel">取消</button>
			
			
			
		</div>
		<div class="container">
			<!-- header -->
			<header>
				<img src="images/top.png" >
				<a href="index-rec.html"><span class="iconfont icon-left"></span></a>
				<span class="s1">专题</span>
				<a href="javascript:;"><span class="iconfont icon-tuichu"></span></a>
			</header>

			<!-- main -->
			<main>
				<div class="m1">
					<img src="images/pic7.png">
				</div>
				

			</main>
			

		</div>
	</body>
</html>
